/<template>
  <div class="head">
      <ul>
          <li 
          v-for="(item,index) in list" 
          :key="index"
           :activeIndex='activeIndex'
           @click="activeIndex=index"
           :class='{on:index==activeIndex}'
          >{{item.title}}</li>
      </ul>
      <div class="con">
          <List :data='data'></List>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import List from '../List.vue'
const Mock=require('mockjs')
const data=Mock.mock({
    'data|12':[{
            img:'@image(100x100,@color)',
            title:'@ctitle',
            name:'@cname',
            "num|0-3000":0
    }]
})

export default {
    components: {
        List,
        
    },
    data(){
        return{
            activeIndex:0,
            num:0,
            list:[],
            data:data.data
        }
    },
   mounted(){
    axios.get('/list').then(res=>{
         this.list=res.data
    })
  }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.head{
    width: 100%;
    height: 40px;
    background: #09f;
}
.head ul{
    display: flex;
    align-content: center;
    justify-content: space-around;
    line-height: 40px;
}
.on{
    color: #fff;
}
</style>